<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox flex mb16 pd16">
      <div class="top_left">
        <div class="title">视频服务相关规则说明</div>
        <p class="content">
          1. 视频文件的大小不能超过5GB，如果上传大批量视频，请联系在线客服。<br>
          2. 视频上传后，系统会根据源视频码率进行转码。<br>
          3. 视频编码后，系统会对视频进行审核，审核时间为2-3个工作日，审核通过后才可以播放。
        </p>
      </div>
      <div class="top_right">
        <div class="title">视频代剪辑服务</div>
        <div class="right_flex">
          <p class="content">
            我们拥有专业的视频制作团队，能够从前期视频策划、视频拍摄，到后期剪辑视频、视频字幕添加、合成视频、视频制作等为客户提供视频制作全程服务。
          </p>
          <span @click="$refs.kfdialog.customerDialogs = true">立即订购</span>

        </div>
        <span class="right_top">增值服务</span>
      </div>
    </div>
    <div class="alone-topBox">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items:center">
          <div class="mb16">
            <span>视频名称：</span>
            <el-input v-model="searchObj.videoName" placeholder="请输入关键字" class="width200 mr16" />
          </div>
          <div class="mb16 mr16">
            <span>视频来源：</span>
            <el-select v-model="searchObj.videoSource" placeholder="请选择" class="width110" clearable>
              <el-option v-for="item in videoSourceList" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>上架状态：</span>
            <el-select v-model="searchObj.videoPub" placeholder="请选择" class="width110" clearable>
              <el-option v-for="item in videoPubList" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>上传时间：</span>
            <el-date-picker v-model="times" format="yyyy-MM-dd" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">查询</el-button>
          </div>
        </div>
        <div>

        </div>
      </div>
    </div>

    <div class="tableBox realitive">
      <el-tabs v-model="searchObj.videoStatus" @tab-click="handleClick">
        <el-tab-pane label="全部视频" name=""></el-tab-pane>
        <el-tab-pane label="已通过" name="1"></el-tab-pane>
        <el-tab-pane label="审核中" name="2"></el-tab-pane>
        <el-tab-pane label="未通过" name="3"></el-tab-pane>
      </el-tabs>
      <div class="flex right_butn">
        <root-item :rootData="rootData">
          <template slot="getchange">
            <el-link type="primary" style="padding-left: 10px;" :underline="false"
              @click="$refs.exchange.shareMeetDia = true">兑换</el-link>
          </template>
        </root-item>
        <el-button type="primary" @click="getChangeTem('isAddStaff')"><i class="el-icon-plus" />添加视频</el-button>
        <el-button type="primary" @click="sendMesage()">批量发送视频名单</el-button>
      </div>
    </div>
    <div style="padding-left: 16px;background: #fff;">
      <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620" ref="multipleTable"
        :default-sort="{ prop: 'createdate', order: 'descending' }" @sort-change="sortChange"
        @selection-change="handleSelectionChange" @select="selectVideo" @select-all="selectAllVideo">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="title" label="视频名称" min-width="300" align="left">
          <template slot-scope="scope">
            <div class="flex">
              <div class="mr20"><img :src="scope.row.cover" width="104" height="69"></div>
              <div>
                <div><el-link v-if="scope.row.videoid&&scope.row.videoid!=''&&scope.row.videoid!=null" type="primary"
                    :href="'https://www.instrument.com.cn/webinar/video_' + scope.row.videoid + '.html'"
                    target="_blank">{{
                      scope.row.title
                    }}</el-link>
                     <div v-else>{{ scope.row.title }}</div>
                  </div>
                   
                <div><span v-for="item in scope.row.title.split" :key="item">{{ item }}</span></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sampleName" label="视频来源" min-width="110" align="left">
          <template slot-scope="scope">

            <div v-if="scope.row.videoSource == 1">
              赞助会议
            </div>
            <div v-if="scope.row.videoSource == 2">
              自助上传
            </div>
            <div v-if="scope.row.videoSource == 3">
              专属定制会
            </div>
            <div v-if="scope.row.videoSource == 4">
              厂商会
            </div>
            <div v-if="scope.row.videoSource == 5">
              自助会议
            </div>
            <div v-if="scope.row.videoSource == 6">
              高级定制会
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="lyState" label="上架状态" min-width="80" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.ispub == 0">未上架</div>
            <div v-else-if="scope.row.ispub == 1">已上架</div>
            <div v-else-if="scope.row.ispub == 2">上架中</div>
            <div v-else-if="scope.row.ispub == 3">已下架</div>
          </template>
        </el-table-column>

        <el-table-column prop="3" label="播放量" min-width="100" align="center" :sortable="'custom'">
          <template slot-scope="scope">
            <div>{{ scope.row.click }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="1" label="授权共享用户" align="center" width="140" :sortable="'custom'">
          <template slot-scope="scope">
            <div class="mn_a" @click="goshare(scope.row)">{{ scope.row.authorizedCount }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="2" label="提问数" min-width="100" align="center" :sortable="'custom'">
          <template slot-scope="scope">
            <div class="mn_a" @click="goquestion(scope.row)">{{ scope.row.questionCount }}</div>
          </template>
        </el-table-column>
        
        <el-table-column label="绑定仪器" prop="productName" min-width="100" align="left">
           <template slot-scope="scope">
            <div v-if="scope.row.productName!=null && scope.row.productName!=''">{{ scope.row.productName }}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column prop="4" label="上传时间" min-width="160" align="center" :sortable="'custom'">
          <template slot-scope="scope">
            {{ scope.row.createdate }}
          </template>
        </el-table-column>

        <el-table-column prop="date" label="审核状态" min-width="100" align="center">
          <template slot-scope="scope">
            <!-- <div v-if = "scope.row.status ==0">未审核</div> -->
            <div v-if="scope.row.status == 1">审核通过</div>
            <div v-else-if="scope.row.status == 2 || scope.row.status == 0">审核中</div>
            <div v-else-if="scope.row.status == 3">审核驳回</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="220" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1" :disabled="scope.row.videoSource != 2 && scope.row.videoSource != 5"
              type="text" class="mr10" @click="undercarriageByVideoId(scope.row)">{{ scope.row.ispub_operStr
              }}</el-button>
            <el-button v-if="scope.row.status == 1 || scope.row.status == 3"
              :disabled="scope.row.videoSource != 2 && scope.row.videoSource != 5" type="text"
              @click="editVideo(scope.row)" class="mr10">编辑</el-button>
            <el-button v-if="scope.row.status == 1" :disabled="scope.row.videoSource != 2 && scope.row.videoSource != 5"
              class="mr10" type="text" @click="downFile(scope.row)">下载</el-button>
            <el-button v-if="scope.row.status == 1 || scope.row.status == 3"
              :disabled="scope.row.videoSource != 2 && scope.row.videoSource != 5" type="text"
              @click="deleteVideo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格 -->

    <div class="alignRight">
      <Pagination :total="total" :page="searchObj.current" :limit="searchObj.size" @pagination="paginations" />
    </div>
    <kf-dialog :content="'请联系您的销售顾问，进行订购'" ref="kfdialog"></kf-dialog>
    <exchange-dialog ref="exchange" :rootchangedata="rootchangedata" @reflashRoot="reflashRoot"></exchange-dialog>
    <sendmesage-dialog ref="sendmesageDialog" :videochousedata="videochousedata" @reflash="reflash"></sendmesage-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import kfDialog from '@/components/kfdialog/index.vue'
import exchangeDialog from '../components/exchangeDialog/index.vue'
import sendmesageDialog from '../components/sendmesageDialog/index.vue'
import rootItem from "@/components/rootItem/index.vue";
import Cookies from 'js-cookie'
import indexapi from '@/api/index'
export default {
  components: {
    Pagination,
    kfDialog,
    rootItem,
    exchangeDialog,
    sendmesageDialog
  },
  data() {
    return {
      start_date: '',
      rootchangedata: 0,
      times: [],
      DataTable: [],
      datatime: [],
      searchObj: {
        imshowId: this.$store.getters.imShowId,
        videoSource: '',
        userName: this.$store.getters.imShowId,
        title: '',
        videoStatus: '',
        startTime: '',
        endTime: '',
        type: 4,
        sort: 2,
        size: 10,
        current: 1
      },
      rootData: {
        title: "自助上传视频上架剩余权限数",
        maded: 0,
        all: 0,
      },
      total: 0,
      loading: false,
      reasonDia: false,
      returnReason: '',
      videoSourceList: [
        { name: '赞助会议', value: '1' },
        { name: '自助上传', value: '2' },
        { name: '专属定制会', value: '3' },
        { name: '厂商会', value: '4' },
        { name: '自助会议', value: '5' },
        { name: '高级定制会', value: '6' }
      ],
      videochousedata: [],
      videoPubList: [
        { name: '已上架', value: '1' },
        { name: '上架中', value: '2' },
        { name: '已下架', value: '3' }
      ],
      selfVideoNum: 0,
      selfVideoUsedNum: 0
    
    }
  },
  mounted() {
    // this.getclassification();
    this.SearchList()
    this.getVideoNumCount()
    this.getCompanyAllServiceNum()
  },
  methods: {
    reflash(val) {
      this.React()
    },
    reflashRoot(){
      this.getCompanyAllServiceNum()
    },
    selectAllVideo(selection) {
      // console.log(selection);
      if (selection.length > 0) {
        for (let i = 0; i < selection.length; i++) {
          if (selection[i].videoSource != 2) {
            this.$refs.multipleTable.clearSelection();
            this.$message({ type: 'error', message: '只有自助上传的视频数据才可以发送邮箱！' })
            return false
          }
        }
      }
    },
    selectVideo(selection, row) {
      // console.log(selection, row);
      if (row && row.videoSource != 2) {
        this.$refs.multipleTable.toggleRowSelection(row, false);
        this.$message({ type: 'error', message: '只有自助上传的视频数据才可以发送邮箱！' })
      }

    },
    handleSelectionChange(val) {


      this.videochousedata = val.filter(item => {
        if (item.videoSource == 2) {
          return item
        }
      })
      // console.log(this.videochousedata, '33331');
    },
    sendMesage() {
      if (this.videochousedata.length == 0) {
        this.$message({ type: 'error', message: '请选择视频' })
        return false
      }
      this.$refs.sendmesageDialog.sendmesageDia = true
    },
    getCompanyAllServiceNum() {
      let form = {
        imshowId: this.$store.getters.imShowId,
      };
      indexapi.common.getCompanyAllServiceNum(form).then((res) => {
           this.rootchangedata = res.data.self_meet_num-res.data.self_meet_num_used;
          (this.rootData.all = res.data.self_video_num);
          (this.rootData.maded =res.data.self_video_num - res.data.self_video_num_used);
      });
    },
    goshare(item) {
      this.$router.push({ path: '/video/videolistShare', query: { id: item.videoid, type: item.videoSource } })
    },
    goquestion(item) {
      this.$router.push({ path: '/video/questionmange', query: { id: item.videoid } })
    },
    getChangeTem(val) {
      this.$router.push('/video/videolistadd')
    },
    handleClick(tab, event) {
      this.searchObj.videoStatus = tab.name
      this.SearchListBt()
    },
    getVideoNumCount() {
      const form = {
        imshowId: this.$store.getters.imShowId
      }
      indexapi.home.getComapany(form).then((res) => {
        if (res.code === 200) {
          this.selfVideoNum = res.data.selfVideoNum
          this.selfVideoUsedNum = res.data.selfVideoUsedNum
        }
        if (this.selfVideoUsedNum == 0) {
          this.selfVideoUsedNum == 0.1
        }
      })
    },
    //编辑视频
    editVideo(val) {
      this.$router.push({ path: '/video/videolistadd', query: { id: val.videoid } })
    },
    // 删除视频
    deleteVideo(val) {
      this.$confirm(
        '确实要删除视频？ 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (val.ispub_operStr == '下架') {
            this.$message({ type: 'error', message: '请先下架视频，再删除，避免权限丢失！' })
            return false
          }
          const form = {
            videoId: val.videoid
          }
          indexapi.video.deletedByVideoId(form).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.SearchList()
              this.getCompanyAllServiceNum()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 上下架
    undercarriageByVideoId(val) {
      this.$confirm(
        '确实要' + val.ispub_operStr + '视频?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (this.rootData.maded > 0) {
            const form = {
              videoId: val.videoid,
              type: val.ispub_type
            }
            indexapi.video.undercarriageByVideoId(form).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                this.SearchList()
                this.getCompanyAllServiceNum()
              }
            })
          } else {
            this.$message({ type: 'error', message: '权限不足！' })
          }

        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + val.ispub_operStr + ''
          })
        })
    },
    downFile(val) {
      const form = {
        ccvid: val.newccvid
      }
      this.loading = true
      indexapi.video.getVideoUrlDownload(form).then((res) => {
        this.loading = false
        window.open(res.data.playurl)
      })
    },
    // 跳转
    openDialog(val) {
      window.open(
        `https://www.instrument.com.cn/webinar/video_${val.videoid}.html`
      )
    },
    // 重置
    React() {
      this.searchObj = {
        userName: this.$store.getters.imShowId,
        videoName: '',
        videoPub: '',
        videoSource: '',
        startTime: '',
        endTime: '',
        size: 10,
        current: 1
      }
      this.times = []
      this.SearchList()
    },
    // 查询
    SearchListBt() {
      this.searchObj.size = 10
      this.searchObj.current = 1
      this.SearchList()
    },
    sortChange(column, prop, order) {
      // console.log(column, 'column');
      this.searchObj.type = column.prop
      if (column.order === 'descending') {
        this.searchObj.sort = 2
      } else {
        this.searchObj.sort = 1
      }
      this.SearchList()
    },
    SearchList() {
      this.loading = true
      if (this.times.length > 0) {
        this.searchObj.startTime = this.times[0]
        this.searchObj.endTime = this.times[1]
      }
      indexapi.video.getVideoList(this.searchObj).then((res) => {
        this.loading = false
        this.DataTable = res.data.records
        // console.log(this.DataTable);
        this.DataTable.forEach((item) => {
          switch (item.ispub) {
            case 0:
              item.ispub_operStr = '上架'
              item.ispub_type = 1
              break
            case 3:
              item.ispub_operStr = '上架'
              item.ispub_type = 1
              break
            case 1:
              item.ispub_operStr = '下架'
              item.ispub_type = 0
              break
            default:
              item.ispub_operStr = '--'
              break
          }
        })
        this.total = res.data.total
      })
    },
    // 分页
    paginations(val) {
      this.searchObj.size = val.limit
      this.searchObj.current = val.page
      this.SearchList()
    },
    releaseInformation() {
      this.$router.push('/content/solutionscheme/solution/addoredit')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after {
  height: 1px !important;
}

.right_butn {
  align-items: center;
  position: absolute;
  right: 16px;
  top: 15px;
}

.top_left {
  flex: 3.02;
  padding: 15px 16px;
  background: linear-gradient(180deg, #DDEEFF 0%, #F2F8FF 100%);
  margin-right: 16px;

  .title {
    font-size: 14px;
    font-weight: 600;
    color: #0C7FF2;
    line-height: 16px;
    margin-bottom: 5px;
  }

  .content {
    font-weight: 400;
    color: #000000;
    line-height: 24px;
  }
}

.top_right {
  flex: 2;
  padding: 15px 16px;
  background: linear-gradient(180deg, #FFF6DF 0%, #FFFDF4 100%);
  position: relative;

  .title {
    font-size: 14px;
    font-weight: 600;
    color: #A3854E;
    line-height: 16px;
    margin-bottom: 5px;
  }

  .right_top {
    position: absolute;
    display: inline-block;
    background: url('https://instrumentui.oss-cn-beijing.aliyuncs.com/ui/simg/instrument/20230302/yht/img/video.png') no-repeat;
    background-size: 100%;
    top: 0;
    right: 0;
    padding: 5px 11px 13px;
    color: #fff;
  }

  .right_flex {
    @include flex(row, center, flex-start);

    .content {
      font-weight: 400;
      color: #000000;
      line-height: 24px;
      flex: 4.73;
      max-width: 455px;
    }

    span {
      display: inline-block;
      max-width: 96px;
      height: 28px;
      background: #FFFFFF;
      color: #A3854E;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #A3854E;
      line-height: 28px;
      text-align: center;
      margin-left: 16px;
      cursor: pointer;
      flex: 1;
    }

    span:hover {
      background: rgb(163 133 78 / 20%);
      transition: background .6s;
    }
  }

}

.pd16 {
  padding: 16px;
}

.mn_a {
  color: #0c7ff2;
  cursor: pointer;
}

.mn_a:hover {
  text-decoration: underline;
}

.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}

.staffinfo {
  width: 100%;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: #FFFFFF;

  .staff-nav {
    width: 100%;
    @include flex(row, center, space-between);

    .nav-option {
      @include flex(row, center, flex-start);

      i {
        font-size: 14px;
        color: #4F5862;
        margin-right: 10px;
      }

      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px;
      }

      .option-progress {
        @include flex(row, center, center);
        margin-right: 20px;

        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }

      ::v-deep .el-progress {
        width: 300px;
        margin-right: 20px;

        .el-progress-bar {
          border-radius: 0;

          .el-progress-bar__outer {
            border-radius: 0;

            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
</style>
